<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <!-- 
        事件委托：
        e.target  事件源  事件发生的元素对象

        事件不直接绑定个子元素，而是绑定给父元素，当子元素有事件发生的时候
        通过冒泡触发到父元素，委托父元素的事件进行处理
     -->
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
        <li>无序列表5</li>
    </ul>
   
    <script>
        var lis=document.querySelectorAll("li")
        var ul=document.querySelector('ul')
        // for(var i=0;i<lis.lengh;i++)
        // {
        //     lis[i].onclick=function()
        //     {
        //         alert(this.innerText)
        //     }
        // }
        ul.onclick=function(e)
        {
            //e.target 指的是事件源/触发对象 如(btn)
            e.target.style.backgroundColor='#ddd'
        }
        var cloneLi=lis[0].cloneNode(true)   //复制
        lis[0].parentNode.appendChild(cloneLi)  //添加在后面
        var cloneLi=lis[1].cloneNode(true)   //二次复制
        lis[0].parentNode.appendChild(cloneLi)  //添加在后面
    </script>
    
</body>
</html>